<!--
 * @Description: 邀请有礼添加商品
 * @Author: liyujie
 * @Date: 2021/2/23
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/2/23
-->

<template>
    <section class="wrapper">
        <el-dialog
            title="添加邀请有礼商品"
            width="680px"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            @close="handleClose"
        >
            <el-form
                class="base-info contract"
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-position="right"
                label-width="96px"
            >
                <el-form-item
                    label="选择自营商品"
                    prop="goods_no"
                    v-if="type === 'add'"
                >
                    <el-button
                        size="medium"
                        type="primary"
                        @click="$refs.goodsSelect.show(1, requestUrl, typeList)"
                    >
                        选择商品
                    </el-button>
                </el-form-item>
                <el-form-item
                    label="商品编号"
                >
                    {{ ruleForm.goods_no }}
                </el-form-item>
                <el-form-item
                    label="商品名称"
                >
                    {{ ruleForm.title }}
                </el-form-item>
                <el-form-item
                    label="商品缩略图"
                    v-if="ruleForm.cover"
                >
                    <img
                        :src="ruleForm.cover"
                        alt="加载失败"
                        style="width:80px;height:80px;cursor: pointer"
                        @click="fnShowPreview(ruleForm.cover)"
                    >
                </el-form-item>
                <el-form-item
                    label="排序号"
                    prop="sort"
                >
                    <el-input
                        oninput="value = value.replace(/[^\d]/g,'')"
                        v-model.number="ruleForm.sort"
                        size="medium"
                        clearable
                        style="width: 380px"
                    />
                </el-form-item>
                <el-form-item
                    label="价格"
                    prop="price"
                >
                    <el-input
                        v-model="ruleForm.price"
                        placeholder="请输入价格，改价格仅用于展示"
                        size="medium"
                        clearable
                        style="width: 380px"
                    />
                </el-form-item>
            </el-form>
            <div class="btn">
                <el-button
                    size="medium"
                    style="width: 120px;margin-right: 32px"
                    @click="dialogVisible = false"
                >
                    取消
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    style="width: 120px"
                    :loading="loading"
                    @click="handleSubmit"
                >
                    确认
                </el-button>
            </div>
        </el-dialog>

        <!-- 图片预览 -->
        <img-preview ref="preview"/>
        <!--商品选择弹窗-->
        <goods-select
            ref="goodsSelect"
            @change="handleSelectGoods"
        />
    </section>
</template>

<script>
import ImgPreview from "@/components/common/img-preview";
import GoodsSelect from "@/components/goods/goods-select";

export default {
    name: "AddGoodsDialog",
    components: {ImgPreview,GoodsSelect},
    data() {
        return {
            type: 'add',
            dialogVisible: false,
            loading: false,
            ruleForm: {
                title: '',
                cover: '',
                goods_no: '',
                sort: 99,
                price: '',
            },
            rules: {
                goods_no: [
                    {required: true, message: '请选择商品', trigger: 'change'}
                ],
                price: [
                    {required: true, message: '请填写价格', trigger: 'blur'}
                ]
            },
            typeList: [
                {label: '自营', value: 1},
                {label: '折扣', value: 5},
                {label: '秒杀', value: 3}
            ],
            requestUrl: '/student/student_user_invite_award_goods%5Cget_depot_goods_list'
        };
    },
    methods: {
        /**
         * 显示弹窗
         * @param type - edit编辑 add新增
         * @param data
         */
        show(type, data) {
            if(type === 'edit') {
                this.ruleForm.goods_no = data.goods_no;
                this.ruleForm.cover = data.cover;
                this.ruleForm.title = data.title;
                this.ruleForm.sort = data.sort;
                this.ruleForm.price = data.price;
            }
            this.type = type;
            this.dialogVisible = true;
        },

        /**
         * 提交
         */
        handleSubmit() {
            this.$refs.ruleForm.validate((valid) => {
                if(valid) {
                    this.loading = true;

                    let params = {...this.ruleForm};

                    this.$post('/student/student_user_invite_award_goods%5Csave',params, resp => {
                        if(resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '添加成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.$emit('update');
                            this.dialogVisible = false;
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                type: 'warning',
                                duration: 2000
                            });
                        }
                        this.loading = false;
                    });
                }
            });
        },

        /**
         * 预览图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         * @param index
         */
        fnShowPreview(images, index) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },

        /**
         * 弹窗关闭
         */
        handleClose() {
            this.ruleForm.goods_no = '';
            this.ruleForm.sort = 99;
            this.ruleForm.cover = '';
            this.ruleForm.price = '';
            this.ruleForm.title = '';
            this.type = 'add';
            this.$refs.ruleForm.clearValidate();
        },

        /**
         * 选择商品
         * @param val
         */
        handleSelectGoods(val) {
            this.ruleForm.goods_no = val.goods_no;
            this.ruleForm.title = val.goods_title;
            this.ruleForm.cover = val.goods_cover;
            this.ruleForm.sort = 99;
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-dialog__body {
        padding: 48px;
        overflow: auto;
        &::-webkit-scrollbar {
            width: 6px;
        }
    }
    .btn {
        text-align: center;
        margin-top: 36px;
    }
}
</style>
